<template>
	<view>
		<view class="search-title">
			<uni-icons type="left" color="#888" size="28" @click="back"></uni-icons>
			<uni-search-bar class="search-box" radius="20" placeholder="请输入关键词" clearButton="auto" cancelButton="none"
				@confirm="search" @input="input" />
			<button class="search-button" size="mini" v-model="searchValue" @click="clickSearch">搜索</button>
		</view>
		<Line></Line>
		<view class="search-item">
			<view class="search-item-title">
				<view>最近搜索</view>
				<uni-icons type="trash" color="#888" size="26"></uni-icons>
			</view>
			<view class="search-item-content">
				<view class="search-item-name">蛋炒饭</view>
				<view class="search-item-name">鸡翅</view>
			</view>
		</view>
		
		<view class="search-item">
			<view class="search-item-title">
				<view>热门搜索</view>
			</view>
			<view class="search-item-content">
				<view class="search-item-name">红烧肉</view>
				<view class="search-item-name">土豆牛腩</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Line from '@/components/Line.vue'
	import {
		ref,
		createApp
	} from 'vue';
	const back = () => {
		uni.navigateBack()
	}
	let searchValue = ref('123');
	
	const input = (res) => {
		searchValue.value = res;
	}
	
	const search = (res) => {
		uni.setStorage({
			key: 'storage_search',
			data: res.value,
			success: function () {
				console.log(res.value);
			}
		});
		uni.navigateTo({
			url:'../search-list/search-list'
		})
	}
	
	const clickSearch = () => {
		uni.setStorage({
			key: 'storage_search',
			data: searchValue.value,
			success: function () {
				console.log(searchValue.value);
			}
		});
		uni.navigateTo({
			url:'../search-list/search-list'
		})
	}
</script>

<style lang="scss" scoped>
	.search-title {
		display: flex;
		align-items: center;
		padding: 20rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
	}

	.search-box {
		width: 520rpx;
	}

	.search-button {
		color: white;
		background-color: #ff4d4f;
		border: #ff4d4f;
		border-radius: 30rpx;
	}
	
	.search-item {
		padding: 30rpx;
		padding-bottom: 40rpx;
	}
	
	.search-item-title {
		display: flex;
		justify-content: space-between;
		font-size: 18px;
	}
	
	.search-item-content {
		padding-top: 20rpx;
	}
	
	.search-item-name {
		padding: 4rpx 24rpx;
		background-color: #F8F8F8;
		display: inline-block;
		border-radius: 26rpx;
		margin: 10rpx;
		color: #888;
	}
</style>